<template>
	<view class="qdDetal" :data-theme="theme" :class="theme" :style="{ backgroundColor: colorData ? colorData.backColor : '' }">
		<view class="img_box"><image class="banner_img" v-if="colorData" :src="colorData.themeImg" mode="aspectFill"></image></view>
		<view class="qdMsg_box" :style="globalColor.style">
			<view class="confernce_msg">
				<u-transition :show="show" mode="fade-left" duration="1000">
					<view class="qdMsg" :style="{ backgroundColor: colorData ? colorData.msgBackColor : '' }">
						<view class="fboxCol Xbetween">
							<text class="title_p font38">{{ hyMsg.themeName }}</text>
							<image :src="hyMsg.themeBanner" class="bannerImg" @tap="picPreview(hyMsg.themeBanner, 0)" mode="aspectFill"></image>
							<!-- <text class="conferenceStatus">未开始</text> -->
						</view>
						<u--form labelWidth="80" :labelStyle="{ color: '#F7F9FF ' }" labelPosition="left" ref="uForm">
							<u-form-item
								v-for="(item, index) in form"
								:key="index"
								:label="item.mc"
								labelPosition="left"
								class="form-content"
								v-if="hyMsg[item.type] || item.type == 'time'"
								:class="{ isAddres: item.type == 'address' }"
							>
								<text class="txt_box" v-if="item.type == 'time'">
									{{ hyMsg.gmtStart ? formatDate(hyMsg.gmtStart) : '' }} - {{ hyMsg.gmtEnd ? formatDate(hyMsg.gmtEnd) : '' }}
								</text>
								<text v-else @tap="openOther(item)" class="txt_box font-ell2">{{ hyMsg[item.type] }}</text>
								<text @tap="openOther(item)" style="color: #fff;font-size: 32rpx;" v-if="item.icon" :class="item.icon" class="bwfont"></text>
							</u-form-item>
						</u--form>
					</view>
				</u-transition>
				<u-transition :show="show" mode="fade-right" duration="1000">
					<view class="qdMsg" style="margin: 24rpx 0;" :style="{ backgroundColor: colorData ? colorData.msgBackColor : '' }">
						<view>
							<view class="view_item font32">活动内容</view>
							<view class="content_detail" v-for="(item, index) in dataTypeList" :key="index">
								<view
									class="mar10 font32"
									style="white-space: pre-wrap;color:#D0D3DB;line-height: 52rpx;"
									v-if="item.type == 'text'"
									v-html="item.segContent"
								></view>
								<image class="mar10" v-else-if="item.type == 'image'" :src="item.segContent" mode="widthFix" @click="picPreview(item.segContent, 1)"></image>
								<video class="mar10" id="videoBox" :show-fullscreen-btn="false" v-else :src="item.segContent" :poster="item.mpc_url"></video>
							</view>
						</view>
						<view style="margin-bottom: 32rpx;" v-if="hyMsg.gmtApplyStart">
							<text class="view_item">报名时间</text>
							<text v-if="hyMsg.gmtApplyStart" class="font32">
								{{ hyMsg.gmtApplyStart ? formatDate(hyMsg.gmtApplyStart) : '' }} - {{ hyMsg.gmtApplyEnd ? formatDate(hyMsg.gmtApplyEnd) : '' }}
							</text>
						</view>
						<view>
							<text class="view_item">签到时间</text>
							<text v-if="hyMsg.gmtSignStart" class="font32">
								{{ hyMsg.gmtSignStart ? formatDate(hyMsg.gmtSignStart) : '' }} - {{ hyMsg.gmtSignEnd ? formatDate(hyMsg.gmtSignEnd) : '' }}
							</text>
						</view>
					</view>
				</u-transition>
			</view>
		</view>

		<BottomBtn :backColor="colorData.backColor" :style="{ '--backBtn': colorData ? colorData.backColor : '' }">
			<template>
				<view
					class="btn font32"
					:style="{ background: colorData ? colorData.btnColor : '' }"
					v-for="(item, index) in btnArr"
					@tap="openCz(item)"
					:key="index"
					v-if="item.isShow"
				>
					{{ item.name }}
				</view>
			</template>
		</BottomBtn>
		<not-login bottom="160rpx" ref="notLogin" />
	</view>
</template>

<script>
import { conferenceSign } from '@/api/h5.js';
import BottomBtn from '@/components/bottom-btn/fixed.vue';
import { judgeIsLogin } from '@/static/js/common.js';
import { utf8to16, base64decode } from '@/static/js/Base64.js';
import { getRequest } from '@/static/js/common.js';
export default {
	components: { BottomBtn },
	props: {
		hyMsg: {
			type: Object,
			default: () => {}
		},
		colorData: {
			type: Object,
			default: () => {}
		},
		btnArr: {
			type: Array,
			default: () => []
		},
		isApp: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			form: [
				// {
				// 	mc: '主题',
				// 	type: 'themeName'
				// },
				{
					mc: '活动时间',
					type: 'time'
				},

				{
					mc: '主 办 方',
					type: 'sponsors'
				},
				{
					mc: '承 办 方',
					type: 'organizers'
				},

				{
					mc: '联系电话',
					type: 'contact',
					icon: 'bw-dianhua3',
					func: 'goPhone'
				},
				{
					mc: '活动地址',
					type: 'address',
					icon: 'bw-dizhi',
					func: 'openMap'
				}
			],
			conferenceId: '', // 会议id
			dataTypeList: [],
			videoList: [],
			show: false
		};
	},
	onLoad() {},
	mounted() {
		// #ifdef H5
		window.appSweepCallback = this.appSweepCallback;
		// #endif
	},
	watch: {
		'hyMsg.content': {
			handler(val) {
				this.dataTypeList = JSON.parse(this.hyMsg.content);
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		getVideoList(data) {
			if (!data) {
				return;
			}
			this.$nextTick(() => {
				this.videoList = document.querySelectorAll('video');
				this.videoList.forEach((item, index) => {
					item.addEventListener('play', () => {
						this.$emit('pauseVideo', true);
						this.videoList.forEach((_item, _index) => {
							if (index != _index) {
								_item.pause();
							}
						});
					});
				});
			});
		},
		// 格式化时间
		formatDate(time) {
			let date = time.split(' ')[0];
			return date.replaceAll('-', '.');
		},
		// 暂停所有视频
		pauseAllVideo() {
			this.videoList.forEach((_item, _index) => {
				_item.pause();
			});
		},
		// 查看图片
		picPreview(urls, index) {
			uni.previewImage({
				urls: [urls],
				current: index
			});
		},
		// 打开电话界面
		goPhone() {
			if (this.isApp) {
				const data = { type: 'callPhone', contact: this.hyMsg.contact };
				this.$bridge.callHandler('appHandler', data, () => {
					console.log('appHandler', '返回');
				});
			} else {
				uni.makePhoneCall({
					phoneNumber: this.hyMsg.contact,
					success: function(res) {
						console.log(res);
					}
				});
			}
		},
		openOther(item) {
			if (item.func) {
				this[item.func]();
			}
		},
		// 打开地图弹框 选择地图
		openMap() {
			if (this.isApp) {
				const data = { type: 'address', latitude: this.hyMsg.latitude, longitude: this.hyMsg.longitude, workAddress: this.hyMsg.address };
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回');
				});
			} else {
				const obj = {
					latitude: this.hyMsg.latitude,
					longitude: this.hyMsg.longitude,
					name: this.hyMsg.address
				};
				// 仅在小程序使用这种地图导航
				// #ifdef MP
				uni.openLocation({
					...obj,
					success: function() {
						console.log('成功');
					},
					fail: function() {
						console.log('失败了');
					}
				});
				// #endif
			}
		},
		// 底部按钮操作
		openCz(item) {
			if (item.func) {
				// if (!judgeIsLogin()) {
				// 	this.$nextTick(() => {
				// 		this.$refs.notLogin.openLogin({
				// 			show: true,
				// 			position: 'center'
				// 		});
				// 	});
				// 	return;
				// }
				this[item.func]();
			}
		},
		// 立即报名
		RegisterNow() {
			const data = JSON.parse(this.hyMsg.applyFields);
			getApp().globalData.signMsg = [...data];
			if (this.isApp) {
				this.$pageTo('/bwSign/applyHy?conferenceId=' + this.hyMsg.conferenceId + '&themeBanner=' + this.hyMsg.themeBanner);
			} else {
				if (!judgeIsLogin()) {
					this.$nextTick(() => {
						this.$refs.notLogin.openLogin({
							show: true,
							position: 'center'
						});
					});
					return;
				}
				this.$pageTo('/bwSign/applyHy?conferenceId=' + this.hyMsg.conferenceId + '&themeBanner=' + this.hyMsg.themeBanner);
			}
		},
		// 立即签到
		signNow() {
			if (this.isApp) {
				this.$pageTo('/bwSign/conferenceSign?conferenceId=' + this.hyMsg.conferenceId + '&themeName=' + this.hyMsg.themeName);
			} else {
				if (!judgeIsLogin()) {
					this.$nextTick(() => {
						this.$refs.notLogin.openLogin({
							show: true,
							position: 'center'
						});
					});
					return;
				}
				this.$pageTo('/bwSign/conferenceSign?conferenceId=' + this.conferenceId + '&themeName=' + this.hyMsg.themeName);
			}
		},
		appSweepCallback(res) {
			const url = res;
			const conferenceId = url.split('?')[1].split('=')[1];
			conferenceSign({ conferenceId: conferenceId }).then(res => {
				if (res.data) {
					this.$pageTo('/bwSign/conferenceSign?conferenceId=' + conferenceId + '&themeName=' + this.hyMsg.themeName + '&isShowSubmit=' + true);
				}
			});
		},
		// 扫码签到
		sweepNow() {
			if (this.isApp) {
				const data = { type: 'sweepNow' };
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回');
				});
			} else {
				this.$pageTo('/about/guidePage');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 780px) {
	.banner_img {
		height: 620rpx;
	}
	.bannerImg{
		height: 520rpx;
	}
}
::v-deep .u-form-item__body__left__content__label {
	color: #FFFFFF !important;
	font-size: 32rpx !important;
	text-align: justify;
	> span {
		width: 100%;
		height: 28rpx;
		margin-right: 10rpx;
		&::after {
			content: '';
			width: 100%;
			display: inline-block;
		}
	}
}
::v-deep .u-form-item__body__right__content__slot {
	flex-direction: row;
	align-items: unset;
}
::v-deep .isAddres .u-form-item__body__left {
	display: block !important;
}
::v-deep .u-form-item__body {
	align-items: baseline;
}
::v-deep .u-form-item__body__left {
	width: 150rpx !important;
}
.content_detail {
	margin-bottom: 32rpx;
	> p {
		font-size: 32rpx;
		color: var(--contentFontLightColor);
		line-height: 38rpx;
	}
	> image {
		width: 100%;
	}
	> video {
		width: 100%;
	}
	.mar10 {
		margin-bottom: 20rpx;
	}
}
.btn_box {
	padding-bottom: 40rpx;
}
.btn {
	width: 100%;
	height: 84rpx;
	border-radius: 12rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.txt_box {
	font-weight: 400;
	// color: var(--contentFontLightColor);
	color: #D0D3DB;
	line-height: 38rpx;
	flex: 1;
	padding-right: 10rpx;
	font-size: 32rpx;
}
.img_right {
	width: 44rpx;
	height: 44rpx;
	float: right;
}
.qdDetal {
	min-height: 100vh;
	.img_box {
		> image {
			width: 100%;
		}
	}
	.qdMsg_box {
		.confernce_msg {
			position: relative;
			top: -56rpx;
			padding: 0 24rpx;
		}
		.qdMsg {
			background-color: var(--viewBgColor);
			border-radius: 12rpx;
			padding: 24rpx;
			.conferenceStatus {
				background: rgba(255, 255, 255, 0.15);
				border-radius: 8rpx;
				padding: 10rpx 20rpx;
			}
			.title_p {
				color: #fff;
				margin-bottom: 50rpx;
				font-weight: 500;
			}
			.bannerImg {
				width: 100%;
				max-height: 300rpx;
				border-radius: 12rpx;
			}
			> view {
				.view_item {
					color: #FFFFFF;
					margin-bottom: 24rpx;
					margin-right: 40rpx;
					font-size: 32rpx;
				}
				> text {
					color: #D0D3DB;
					line-height: 38rpx;
				}
			}
		}
	}
}
</style>
